<template>
    <div class="facilityList">
        <div class="noData" v-if="!rtuList || !rtuList.length">未配置设施</div>
        <div class="rtuInfo" v-for="rtuInfo, index in rtuList" :key="index">
            <div class="hander" :class="rtuInfo.rtuStatus ? 'online' : 'offline'">
                <div class="title">
                    <span>{{ rtuInfo.rtuName }}</span>
                    <span class="rtuStatus">{{ rtuInfo.rtuStatus ? '在线' : '离线' }}</span>
                </div>
            </div>
            <div class="environmentalData dataInfo">
                <div class="title">物联数据</div>
                <div class="dataList">
                    <div class="swiper mySwiper" :id="`environmentalSwiper_${index + 1}`">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"
                                v-for="list, item_index in getMainingControlType(rtuInfo.dataItemList, '采集', 3)"
                                :key="item_index">
                                <div class="dataItem" v-for="data, i in list" :key="item_index + '' + i">
                                    <div class="icon">
                                        <img :src="data.icon1" alt="">
                                    </div>
                                    <div class="data">
                                        <div>{{ data.value }}{{ data.unit }}</div>
                                        <div class="dataItemName ellipsis">{{ getDataItemName(data.dataItemName) }}
                                        </div>
                                        <div class="collectDatetime">{{ data.collectDatetime }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div :class="`swiper-button-next environmentalSwiper-button-next-${index + 1}`"></div>
                    <div :class="`swiper-button-prev environmentalSwiper-button-prev-${index + 1}`"></div>
                </div>
            </div>
            <div class="equipmentControl dataInfo">
                <div class="title">设备状态</div>
                <div class="dataList">
                    <div class="swiper mySwiper" :id="`equipmentSwiper_${index + 1}`">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"
                                v-for="list, item_index in getMainingControlType(rtuInfo.dataItemList, '采集控制', 1)"
                                :key="item_index">
                                <div class="dataItem" v-for="data, i in list" :key="item_index + '' + i">
                                    <div class="icon">
                                        <img :src="data.icon2" alt="">
                                    </div>
                                    <div class="equipmentControlInfo">
                                        <div
                                            :class="data.dataValue ? 'equipmentControlValue' : 'equipmentControlValue_close'">
                                            {{ data.value }}</div>
                                        <div class="equipmentControlName ellipsis">{{ getDataItemName(data.dataItemName)
                                            }}
                                        </div>
                                        <div class="collectDatetime">{{ data.collectDatetime }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div :class="`swiper-button-next equipmentSwiper-button-next-${index + 1}`"></div>
                    <div :class="`swiper-button-prev equipmentSwiper-button-prev-${index + 1}`"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import facilityApi from "@/api/facility"
import Swiper from '@/utils/swiper' // get token from cookie
export default {
    data() {
        return {
            size: 4,
            page: 1,
            rtuList: [],
            mySwiperList: [],
            loading: false,
            timer: null
        }
    },
    watch: {},
    created() { },
    mounted() {
        this.initData()
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
    methods: {
        initData() {
            //查询rtu
            this.queryRtuData();
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                this.queryRtuData();
            }, 60000 * 5)
        },
        //创建swiper实力
        setSwiper(name, index) {
            // console.log(`#${name}_${index}`)
            // console.log(`${name}-button-next-${index}`)
            var mySwiper = new Swiper(`#${name}_${index}`, {
                slidesPerView: 3,
                spaceBetween: 10,
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                },
                navigation: {
                    nextEl: `.${name}-button-next-${index}`,
                    prevEl: `.${name}-button-prev-${index}`,
                    hideOnClick: false
                },
            });
            mySwiper.el.onmouseover = function () { //鼠标放上暂停轮播
                mySwiper.autoplay.stop();
            };
            mySwiper.el.onmouseleave = function () {
                mySwiper.autoplay.start();
            };
            this.mySwiperList.push(mySwiper)
        },
        //查询RTU列表
        async queryRtuData() {
            this.page = this.$route.query.page;
            let size = this.size || 4;
            let page = this.page || 1;
            let { data: rtuData } = await facilityApi.queryPageListRtuData({
                page,
                size
            });
            this.loading = false;
            if (rtuData.totalPage < page) {
                this.rtuList = []
            } else {
                this.rtuList = rtuData.list || [];
                this.$nextTick(() => {
                    //销毁swiper
                    this.mySwiperList.forEach(e => {
                        e.destroy(false)
                    })
                    this.mySwiperList = [];
                    Array.from({ length: size }, (_, i) => i + 1).forEach(e => {
                        this.setSwiper('equipmentSwiper', e)
                        this.setSwiper('environmentalSwiper', e)
                    })

                })
            }
            // console.log(this.rtuList)
        },
        getMainingControlType(list = [], type, num) {
            console.log(12)
            let newList = [];
            let dataItemList = [];
            list.forEach(e => {
                if (e.dataType && e.dataType.valueType == "ENUM") {
                    let result = e.dataType.enumListType.split(';').map(item => item.split(':')[1]);
                    // console.log(result[e.dataValue || 0], result, e.dataValue, e)
                    dataItemList.push({
                        ...e,
                        value: result[e.dataValue || 0],
                        ...this.setUnitStr(e)
                    })
                } else if (e.dataType && e.dataType.valueType == "UNENUM") {
                    dataItemList.push({
                        ...e,
                        value: e.dataValue || '--',
                        ...this.setUnitStr(e)
                    })
                } else {
                    console.log('无用数据项:', e)
                }
            })
            newList = dataItemList.filter(e => {
                let otherFilterType = ["手动远程单点控制模式", "故障状态", "急停信号"];
                let isFilterItem = otherFilterType.includes(e.dataType.dataTypeName);
                let flag = false;
                if (type == '采集控制') {
                    flag = e.dataType && e.dataType.mainingControlType == type || isFilterItem
                } else {
                    flag = e.dataType && e.dataType.mainingControlType == type && !isFilterItem
                }
                return flag
            })
            console.log(type, newList,)
            return this.pairArray(newList, num)
        },
        pairArray(arr, num = 2) {
            let pairedArray = [];
            for (let i = 0; i < arr.length; i += num) {
                pairedArray.push(arr.slice(i, i + num));
            }
            return pairedArray;
        },
        getDataItemName(name) {
            let dataItemName = ''
            let items = name.split('-')
            let item = items.filter(e => {
                return !e.includes('#')
            })
            dataItemName = item && item[0] ? item[0] : name
            return dataItemName
        },
        setUnitStr(dataItem) {
            let { dataType, dataItemName } = dataItem
            let { dataTypeName } = dataType
            let unit = '';
            let icon1 = '';
            let icon2 = '';
            switch (true) {
                case dataTypeName.includes('温') || dataItemName.includes('温'):
                    unit = '℃';
                    icon1 = require('@/assets/wendu.png')
                    break;
                case dataTypeName.includes('液位') || dataItemName.includes('液位'):
                    unit = 'cm';
                    icon1 = require('@/assets/yewei.png')
                    break;
                case dataTypeName.includes('氧') || dataItemName.includes('氧'):
                    unit = 'mg/L';
                    icon1 = require('@/assets/rongyangzhi.png')
                    break;
                case dataTypeName.includes('氨氮') || dataItemName.includes('氨氮'):
                    unit = 'mg/L';
                    icon1 = require('@/assets/andan.png')
                    break;
                case dataTypeName.includes('亚硝酸盐') || dataItemName.includes('亚硝酸盐'):
                    unit = 'mg/L';
                    icon1 = require('@/assets/yayan.png')
                    break;
                case dataTypeName.includes('pH') || dataTypeName.includes('PH') || dataTypeName.includes('ph') || dataItemName.includes('pH'):
                    unit = '';
                    icon1 = require('@/assets/ph.png')
                    break;
                case dataTypeName.includes('风机') || dataItemName.includes('风机'):
                    unit = '';
                    icon1 = require('@/assets/fengji1.png')
                    icon2 = require('@/assets/fengji.png')
                    break;
                case dataTypeName.includes('循环泵') || dataItemName.includes('循环泵'):
                    unit = '';
                    icon1 = require('@/assets/xunhuanben1.png')
                    icon2 = require('@/assets/xunhuanben.png')
                    break;
                case dataTypeName.includes('电压') || dataItemName.includes('电压'):
                    unit = 'V';
                    icon1 = require('@/assets/dianya1.png')
                    icon2 = require('@/assets/dianya.png')
                    break;
                case dataTypeName.includes('电流') || dataItemName.includes('电流'):
                    unit = 'A';
                    icon1 = require('@/assets/dianliu1.png')
                    icon2 = require('@/assets/dianliu.png')
                    break;
                case dataTypeName.includes('功率') || dataItemName.includes('功率'):
                    unit = 'W';
                    icon1 = require('@/assets/gonglv1.png')
                    icon2 = require('@/assets/gonglv.png')
                    break;
                case dataTypeName.includes('频率') || dataItemName.includes('频率'):
                    unit = '';
                    icon1 = require('@/assets/pinglv1.png')
                    icon2 = require('@/assets/pinglv.png')
                    break;
                case dataTypeName.includes('备用设备') || dataItemName.includes('备用设备'):
                    unit = '';
                    icon1 = require('@/assets/beiyong1.png')
                    icon2 = require('@/assets/beiyong.png')
                    break;
                case dataTypeName.includes('控制') || dataItemName.includes('控制'):
                    unit = '';
                    icon1 = require('@/assets/shebeikongzhi1.png')
                    break;
                case dataTypeName.includes('急停') || dataItemName.includes('急停'):
                    unit = '';
                    icon1 = require('@/assets/jiting1.png')
                    break;
                default:
                    unit = '';
                    icon1 = require('@/assets/default1.png')
                    icon2 = require('@/assets/default.png')
                    break;
            }
            return {
                unit,
                icon1: icon1 || require('@/assets/default1.png'),
                icon2: icon2 || require('@/assets/default.png')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.facilityList {
    width: 100vw;
    height: 100vh;
    background: url(~@/assets/bgImg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px 50px;
    box-sizing: border-box;

    .noData {
        color: #ffffff;
        background-color: #0000005e;
        padding: 20px 100px;
    }

    .rtuInfo {
        width: calc(50% - 30px);
        height: calc(50% - 20px);
        margin: 15px;
        background-color: #ffffff6e;
        border-radius: 8px;

        .hander {
            border-top: 8px dashed #58717850;
            position: relative;
            line-height: 30px;
            padding: 0 12px;
            font-size: 16px;
            font-weight: bold;
            color: #204d6f;
            box-sizing: border-box;

            &::before {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                top: 50%;
                left: 0;
                transform: translate(0, -50%);
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-left: 10px solid rgb(26, 65, 123);
            }

            .title {
                border-bottom: 1px solid #d9d9d9;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        .rtuStatus {
            font-size: 14px;
        }

        .online .rtuStatus {
            color: #3dffa5 !important;
        }

        .offline .rtuStatus {
            color: #bebebe !important;
        }

        .dataInfo {
            padding: 10px 20px;
            box-sizing: border-box;

            .title {
                font-size: 18px;
                font-weight: bold;
                color: #1c4361;
                line-height: 25px;
            }

            .dataList {
                width: 100%;
                height: calc(100% - 25px);
                padding: 0 40px;
                position: relative;

                .dataItem {
                    height: calc(50% - 10px);
                    width: 100%;
                    border-radius: 4px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding-left: 15px;
                    line-height: 20px;
                    text-align: center;
                    box-sizing: border-box;
                    margin: 5px 0;
                    cursor: pointer;
                    transition: all 0.3s;

                    .data {
                        width: 140px;
                    }

                    .icon {
                        border: 1px solid #ffffff;
                    }

                    .dataItemName,
                    .collectDatetime {
                        font-size: 12px;
                        padding: 0 10px
                    }

                    .collectDatetime {
                        color: #ade3f7;
                    }
                }
            }
        }

        .environmentalData {
            height: calc(100% / 3 * 2 - 20px);

            .dataList {
                .dataItem {
                    background: linear-gradient(to bottom right, #6bade8 0%, #1b4b75 100%);
                    color: #ffffff;
                    height: calc(100% / 3 - 10px);

                    &:hover {
                        border: 1px solid #ffffff;
                        background-color: #235c87;
                    }

                    .icon,
                    .icon>img {
                        border-radius: 50%;
                        width: 40px;
                        height: 40px;
                    }
                }

            }
        }

        .equipmentControl {
            height: calc(100% / 3 - 20px);

            .dataList {
                .dataItem {
                    background-color: #d6f5ffb0;
                    height: calc(100% - 10px);
                    display: flex;
                    justify-content: center;
                    align-self: center;

                    &:hover {
                        border: 1px solid #235c87;
                        background-color: #d6f5ffdd;
                    }

                    .icon,
                    .icon>img {
                        border-radius: 50%;
                        width: 30px;
                        height: 30px;
                    }

                    .equipmentControlValue {
                        color: #1c4361;
                        font-weight: bold;
                    }

                    .equipmentControlValue_close {
                        color: #ff0000;
                        font-weight: bold;
                    }

                    .equipmentControlName {
                        font-size: 14px;
                        padding: 0 10px;
                    }

                    .collectDatetime {
                        color: #1b4b75;
                    }
                }

            }
        }
    }
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swiper {
    width: 100%;
    height: 100%;
}



.swiper-button-next,
.swiper-button-prev {
    background-color: #00000055;
    border-radius: 4px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 10px !important;
    color: #ffffff;
}
</style>